<template>
    <div class="Father">
        <h3>父组件</h3>
        <div class="content">
            <Game>
                <template v-slot:ming="{games}">
                    <ul>
                        <li v-for="game in games" :key="game.id">{{ game.name }}</li>
                    </ul>
                </template>
            </Game>
            <Game>
                <template v-slot:ming="{games}">                    <!-- 解构出games -->
                    <ol>
                        <li v-for="game in games" :key="game.id">{{ game.name }}</li>
                    </ol>
                </template>
            </Game>
            <Game>
                <template #ming="{games}">
                    <h3 v-for="game in games" :key="game.id">{{ game.name }}</h3>
                </template>
            </Game>
        </div>
    </div>
</template>

<script lang="ts" setup name="Father">
    import Game from './Game.vue'
</script>

<style scoped>
    .Father{
        background-color: rgb(165, 164, 164);
        padding: 20px;
        border-radius: 10px;
    }
    .content{
        display: flex;
        justify-content: space-evenly;
    }
    img{
        width: 100%;
    }
    h2{
        background-color: orange;
        text-align: center;
        font-size: 20px;
        font-weight: 800px;
    }
</style>